<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <caption>员工列表</caption>
        <tr><th>id</th><th>姓名</th><th>job</th><th>sal</th><th>操作</th></tr>
        <!--v-for遍历emps数组，emp代表遍历出的每个对象-->
        <tr v-for="emp in emps">
            <td>{{emp.id}}</td>
            <!--如果在标签的属性中需要使用Vue中的变量，需要使用Vue的属性绑定
            v-bind:属性名=xxx   简写为 :属性名=xxx-->
            <td><a :href="'/update.html?id='+emp.id">{{emp.name}}</a></td>
            <td>{{emp.job}}</td>
            <td>{{emp.sal}}</td>
            <!--delete()是浏览器自带的方法，我们定义方法时不要使用delete-->
            <!--href="javascript:void(0)":将超链接自带跳转功能废除，
            在这里，我们把这个超连接当成按钮使用-->
            <td><a href="javascript:void(0)" @click="del(emp.id)">删除</a></td>
        </tr>
    </table>
<!--引入axios和vue-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let v = new Vue({
            el:"table",
            data:{
                //在js中，[]是数组，{}是js对象
                emps:[]
            },
            //methods中的方法必须调用才会执行
            methods:{
                select:function () {
                    //这里使用get，因为纯粹是找服务器获取(get)数据，不需要向服务器传递数据
                    /*  axios.get("/select").then(function (res) {
                          //axios框架接收到服务端的JSON字符串后，会将JSON字符串转为JS对象
                          //就可以将JS对象赋值给v.emps
                          v.emps = res.data;
                      })*/
                    $.getJSON("/select",function (result) {
                        v.emps = result;
                    })
                },
                del:function (id) {
                    if(confirm("您确认删除吗?")){
                        //发起异步请求
                        axios.get("/delete?id="+id).then(
                            function (res) {
                                alert(res.data==1?"删除成功":"删除失败");
                                location.reload();//刷新本页面
                            }
                        )
                    }
                }
            },
            //文件就绪事件：页面加载完毕后，立刻执行的代码，就放在created方法中
            created:function () {
               this.select();
            }
        })
    </script>

</body>
</html>